<!-- 资产回收类型 -->
<template>
	<view class="p40">
		<view class="type-container">
			<text style="font-size: 28rpx;color: #0B1526;line-height: 50rpx;">资产类型</text>
			<view class="df aic jcsa">
				<view class="type-list-container df fdc aic mt20">
					<img style="width: 250rpx;height: 210rpx;" src="../../static/imgs/db.png" alt="" />
					<up-checkbox-group
					            v-model="checkboxValue1"
					            placement="column"
					            @change="checkboxChange"
					        >
					            <up-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList1"
					                :key="index"
					                :label="item.name"
					                :name="item.name"
					            >
					            </up-checkbox>
					        </up-checkbox-group>
				</view>
				<view class="type-list-container df fdc aic">
					<img style="width: 250rpx;height: 210rpx;" src="../../static/imgs/hgq.png" alt="" />
					<up-checkbox-group
					            v-model="checkboxValue1"
					            placement="column"
					            @change="checkboxChange"
					        >
					            <up-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList2"
					                :key="index"
					                :label="item.name"
					                :name="item.name"
					            >
					            </up-checkbox>
					        </up-checkbox-group>
				</view>
			</view>
			<view class="df aic mt20 jcsa">
				<view class="type-list-container df fdc aic">
					<img style="width: 250rpx;height: 210rpx;" src="../../static/imgs/jzq.png" alt="" />
					<up-checkbox-group
					            v-model="checkboxValue1"
					            placement="column"
					            @change="checkboxChange"
					        >
					            <up-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList3"
					                :key="index"
					                :label="item.name"
					                :name="item.name"
					            >
					            </up-checkbox>
					        </up-checkbox-group>
				</view>
				<view class="type-list-container df fdc aic">
					<img style="width: 250rpx;height: 210rpx;" src="../../static/imgs/zbzdtype.png" alt="" />
					<up-checkbox-group
					            v-model="checkboxValue1"
					            placement="column"
					            @change="checkboxChange"
					        >
					            <up-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList4"
					                :key="index"
					                :label="item.name"
					                :name="item.name"
					            >
					            </up-checkbox>
					        </up-checkbox-group>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-box">
		<button @click="to_receipt_db" class="df aic jcc" style="background: linear-gradient(269deg, #58C2F7 13%, #2D6CE8 135%);width: 100%;height: 68rpx;border-radius: 36rpx;font-size: 28rpx;color: #fff;">下一步</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const checkboxValue1 = ref([]);
	
	// 基本案列数据
	const checkboxList1 = ref([
	  {
	    name: '电表',
	    disabled: false,
	  }
	]);
	const checkboxList2 = ref([
	  {
	    name: '互感器',
	    disabled: false,
	  }
	]);
	const checkboxList3 = ref([
	  {
	    name: '集中器',
	    disabled: false,
	  }
	]);
	const checkboxList4 = ref([
	  {
	    name: '专变终端',
	    disabled: false,
	  }
	]);
	
	const checkboxChange = (n) => {
	  console.log('change', n);
	};
	
	const to_receipt_db = ()=>{
		uni.redirectTo({
			url:'/pages/receiptDb/receiptDb'
		})
	}
</script>

<style lang="scss">
.type-container{
	padding: 40rpx;
	box-shadow: 0px 0px 28px 0px rgba(83, 83, 83, 0.1);
	border-radius: 16rpx;
}
.type-list-container{
	background: #FFFFFF;
	box-shadow: 0px 0px 28px 0px rgba(83, 83, 83, 0.1);
	border-radius: 16rpx;
}
.bottom-box{
	box-sizing: border-box;
	position: fixed;
	box-shadow: 0px -2px 28px 0px rgba(45, 108, 232, 0.1);
	height: 180rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx !important;
	left: 0;
	bottom: 0;
}
</style>
